<template>
  <footer
    class="fixed bottom-0 z-40 w-full px-8 mt-8 border-t border-gray-500 dark:border-gray-500 bg-white dark:bg-gray-900"
  >
    <div class="flex items-center justify-between h-16">
      <!-- 手机端左下角的用户头像 -->
      <NcCompMenuDrawer
        drawer-size="100%"
        drawer-direction="btt"
      ></NcCompMenuDrawer>

      <!-- 菜单项 -->
      <NcCompLoginAvatar></NcCompLoginAvatar>
      <!--      <NcCompMenuTrigger></NcCompMenuTrigger>-->

      <!--语言切换-->
      <NcIconSwitchLang></NcIconSwitchLang>

      <!--夜间模式-->
      <BtnSwitchColor></BtnSwitchColor>
    </div>
  </footer>
</template>

<script>
import { mapGetters } from 'vuex'
import NcCompMenuDrawer from '~/components/menu-comp/NcCompMenuDrawer'
import NcCompLoginAvatar from '~/components/login-comp/NcCompLoginAvatar'
import NcIconSwitchLang from '~/components/global/icon/NcIconSwitchLang'
import BtnSwitchLang from '~/components/global/btn/BtnSwitchLang'
import BtnSwitchColor from '~/components/global/btn/BtnSwitchColor'
import CompSearch from '~/components/layout-comp/CompSearch'

export default {
  name: 'CompFooterMobile',
  components: {
    CompSearch,
    NcIconSwitchLang,
    NcCompMenuDrawer,
    NcCompLoginAvatar,
    BtnSwitchLang,
    BtnSwitchColor,
  },
  data() {
    return {
      drawerVisible: false,
      scrollY: 0,
    }
  },
  computed: {
    ...mapGetters(['settings', 'user']),
    logo() {
      if (!this.settings.logo) return {}
      return {
        light: this.settings.logo.light,
        dark: this.settings.logo.dark,
      }
    },
  },
  beforeMount() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY
    },
  },
}
</script>
